<%--
  Created by IntelliJ IDEA.
  User: 无论 而且
  Date: 2023/4/10
  Time: 21:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猫眼电影注册</title>
    <style type="text/css">
        /* 设置span中字体大小 */
        span {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
<script>
    window.onload = function () {
        var userMessage = document.getElementById("userMessage");
        var userName = document.getElementById("userName");
        userName.onblur = function () {
            userName.onblur = function () {
                var username = userName.value.trim();
                if (username.length == 0) {
                    userMessage.innerText = "请输入用户名!";
                } else {
                    var userRegExp = /^[A-Za-z0-9]+$/;
                    var isOk = userRegExp.test(username);
                    if (!isOk) {
                        userMessage.innerText = "用户名输入不合法!";
                    }
                    back(userName, userMessage);
                }
            }
        }

        var pwdMessage = document.getElementById("pwdMessage");
        var pwd = document.getElementById("pw1");
        pwd.onblur = function () {
            //获取密码并去除左右空白
            var password = pwd.value.trim();
            //密码不能为空
            if (password.length == 0) {
                pwdMessage.innerText = "请输入密码!";
            } else if (password.length < 6 || password.length > 20) {
                pwdMessage.innerText = "密码长度必须为6-20!";
            }
            //光标回到文本框时清楚提示信息及不合法的密码
            back(pwd, pwdMessage);
        }
        var pw2Message = document.getElementById("pw2Message");
        var pw2 = document.getElementById("pw2");
        pw2.onblur = function () {
            var pwd1 = document.getElementById("pw1");
            var password1 = pwd1.value.trim();
            var password2 = pw2Message.value.trim();

            //密码不能为空
            if (password2.length == 0) {
                pw2Message.innerText = "请确认密码！"
            } else if (password1 != password2) {
                pw2Message.innerText = "两次密码输入不一致，请重新输入！"
            }
            //光标回到文本框时清楚提示信息及不合法的密码
            back(pw2, pwdMessage);
        }

        var phoneMessage = document.getElementById("phoneMessage");
        var phone = document.getElementById("phone");
        phone.onblur = function () {
            //获取密码并去除左右空白
            var p = phone.value.trim();
            //密码不能为空
            if (p.length == 0) {
                phoneMessage.innerText = "请输入电话!";
            } else if (p.length < 6 || p.length > 20) {
                phoneMessage.innerText = "请输入正确的号码";
            }
            //光标回到文本框时清楚提示信息及不合法的密码
            back(phone, phoneMessage);
        }
        var back = function (textElt, messageElt) {
            textElt.onfocus = function () {
                //判断文本框value是否合法
                if (messageElt.innerHTML != "") {
                    this.value = "";
                }
                //清空提示信息
                messageElt.innerHTML = "";
            }
        }
        var zc = document.getElementById("zc")
        zc.onclick = function () {
            userName.focus();
            userName.blur();
            //触发密码文本框的blur事件
            pwd.focus();
            pwd.blur();
            //触发确认密码文本框的blur事件
            pw2.focus();
            pw2.blur();
            phone.focus();
            phone.blur()
            if (userMessage.innerText.length == 0 && pwdMessage.innerText.length == 0 && pw2Message.innerText.length == 0 && phoneMessage.innerText.length == 0) {
                //获取表单对象
                var formElt = document.getElementById("userForm");
                //提交表单
                formElt.submit();
            }


        }
    }


</script>
<h1 align="center">猫眼电影注册</h1>
<div>
    <div>
        <form action="${pageContext.request.contextPath }/register" method="post" id="userForm">
            <div align="center"> 用户名：<input type="text" name="userName" id="userName"/>
                <span id="userMessage"></span>
            </div>
            <div align="center"> 密码：<input type="password" name="password" id="pw1"/>
                <span id="pwdMessage"></span>
            </div>
            <div align="center"> 确认密码：<input type="password" id="pw2"/>
                <span id="pw2Message"></span>

            </div>
            <div align="center"> 手机号：<input type="text" name="phone" id="phone" onclick="checkTel()"/>
                <button class="getCode">发送短信</button>
                <span id="phoneMessage"></span>
            </div>

            <div align="center"> 验证码：<input type="text" id="code" placeholder="请输入验证码"/>
            </div>
            <div align="center">
                <input id="btn" onclick="login()" value="已有帐户，点击登录"/>
                <input type="submit" id="zc" value="注册"/>

            </div>
        </form>
    </div>


</div>

<script>
    function login() {
        window.location = "login1.jsp"
    }
</script>
<script>
    <%--    function nu() {--%>
    <%--        var name = document.getElementById('userName').value;--%>
    <%--        var pw1 = document.getElementById('pw1').value;--%>
    <%--        var pw2 = document.getElementById('pw2').value;--%>
    <%--        var phone = document.getElementById('phone').value;--%>
    <%--        var code = document.getElementById('code').value;--%>
    <%--        if (name == null || name == '') {--%>
    <%--            alert("请输入用户名");--%>
    <%--            return false;--%>
    <%--        } else if (pw1 == null || pw1 == '') {--%>
    <%--            alert("请输入密码")--%>
    <%--        } else if (pw1 != pw2) {--%>
    <%--            alert("两次输入密码不一致")--%>
    <%--        } else if (phone == null || phone == '') {--%>
    <%--            alert("请输入手机号")--%>
    <%--        } else if (code == null || code == '') {--%>
    <%--            alert("请输入验证码")--%>
    <%--        }--%>

    <%--        $.ajax({--%>
    <%--            type: "post",--%>
    <%--            url: "user/register",--%>
    <%--            data: sendData,--%>
    <%--            datatype: 'json',--%>
    <%--            success: function (msg) {--%>
    <%--                if (msg.state == 1) {--%>
    <%--                    alert(msg.message);--%>
    <%--                } else {--%>
    <%--                    alert(msg.message);--%>
    <%--                }--%>
    <%--            },--%>
    <%--            error: function (msg) {--%>
    <%--                alert('通信失败');--%>
    <%--            }--%>
    <%--        });--%>
    <%--    }--%>
    <%--</script>--%>
    <%--<script>--%>
    <%--    function checkTel() {--%>
    <%--        var pattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^(([0\+]\d{2,3})?(0\d{2,3}))(\d{7,8})((\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;--%>
    <%--        if ($("#phone").val() == "") {--%>
    <%--            alert("请输入手机号");--%>
    <%--            return false;--%>
    <%--        } else if (!pattern.test($("#phone").val())) {--%>
    <%--            alert("请输入合法手机号");--%>
    <%--            return reloadPage;--%>
    <%--        }--%>
    <%--        return true;--%>
    <%--    }--%>

    <%--    function reloadPage() {--%>
    <%--        window.location.reload(true);--%>
    <%--    }--%>
</script>
<script>
    // $(function () {
    //     $("#zc").onclick(function () {
    //         if ($("#userName").val() == '') {
    //             alert("请输入用户名");
    //             $("#userName").focus();
    //             return;
    //         } else if ($("#pw1").val() == '') {
    //             alert("请输入密码");
    //             $("#pw1").focus();
    //             return;
    //         } else if ($("#pw2").val() == '') {
    //             alert("请确认密码");
    //             $("#pw2").focus();
    //             return;
    //         }
    //
    //         if ($('#pw1').val() != $('#pw2').val()) {
    //             alert('输入密码和确认密码不一致');
    //             return;
    //         }


    //         var sendData = {
    //             "username": $('#username').val(),
    //             "password": $('#ps').val(),
    //             "passwords": $('#pss').val(),
    //             "name": $('#name').val(),
    //             "age": $('#age').val()
    //         };
    //
    //     })
    // })
</script>
</body>
</html>
